<template>
	<view class="container">
		<view class="wrap">
			<view class="title">请上传支付凭证图片</view>
			<view class="upload-wrap line-center" @tap='uploadImg' v-if='!voucher'>
				<image src="/static/xiangji.png" class="camera"></image>
				<view class="progress-con" v-if='showProgress'>
					<view class="act-progress" :style="{width:progress+'%'}"></view>
				</view>
			</view>
			<view class="upload-wrap line-center" v-else>
				<image :src="voucher" mode="aspectFit" class="voucher"></image>
				<view class="close" @tap='delFile'>
					<uni-icons type='clear' size="24"></uni-icons>
				</view>
			</view>
			<button class="btn line-center" :disabled="isDisabled" @tap='submit'>确定提交</button>
		</view>
		
	</view>
</template>

<script>
	const app = getApp();
	export default {
		data() {
			return {
				rechargeId:'',
				voucher:'',
				progress: 0,
				showProgress: false,
				isDisabled:false,
			};
		},
		onLoad(option) {
			this.rechargeId = option.id ? option.id : 0;
			this.voucher = option.voucher ? option.voucher : '';
		},
		methods:{
			uploadImg(e) {
				let that = this;
				uni.chooseImage({
					count: 1,
					success: function(res) {
						let tempFilePath = res.tempFilePaths[0]
						that.getImgUrl(tempFilePath)
					},
					fail: function(err) {
						console.log('err', err)
					}
				});
			},
			getImgUrl(path) {
				let that = this;
				const uploadTask = uni.uploadFile({
					url: `${app.globalData.hostUrl}/${app.getApi().baseApi.upload}`,
					filePath: path,
					name: 'iFile',
					formData: {
						type: 10
					},
					header: {
						'Authorization': uni.getStorageSync('H5-TOKEN') ? uni.getStorageSync('H5-TOKEN') : "",
						'custom-parameter':2
					},
					success: (uploadFileRes) => {
						var res = JSON.parse(uploadFileRes.data)
						console.log('res', res)
						uni.hideLoading()
						if (res.code == 0) {
							that.voucher = res.file_url;
							that.showProgress = false;
						} else {
							that.showProgress = false;
						}
					},
				});
				uploadTask.onProgressUpdate((res) => {
					that.progress = res.progress;
					that.showProgress = true;
				});
			},
			delFile(){
				this.voucher = ''
			},
			submit(){
				if(!this.voucher){
					uni.showToast({
						title:'请上传支付凭证图片',
						icon:'none'
					})
					return;
				}
				this.isDisabled = true;
				app.globalRequest({
					api:app.getApi().recharge.uploadVoucher,
					method:"POST",
					data:{
						recharge_id:this.rechargeId,
						voucher:this.voucher
					}
				}).then(res=>{
					if(res.code == 0){
						this.isDisabled = false;
						uni.navigateTo({
							url:'/pages/recharge-record/recharge-record'
						})
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
						this.isDisabled = false;
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.title{
		font-size: 28rpx;
		padding-top:38rpx;
	}
	.wrap{
		margin:0 24rpx;
	}
	.upload-wrap{
		width: 100%;
		height: 278rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		border: 2rpx dotted #707070;
		margin-top:36rpx;
		position: relative;
		.camera{
			width: 54rpx;
			height: 42rpx;
		}
		.voucher{
			width: 100%;
			height:100%;
			border-radius: 16rpx;
		}
		.progress-con {
			width: 440rpx;
			height: 10rpx;
			background: #F2F4F7;
			border-radius: 12rpx;
			margin: 30rpx auto 0;
			position: absolute;
			left: 0;
			right: 0;
			margin: auto;
			bottom: 80rpx;
		}
		.act-progress {
			width: 0%;
			height: 10rpx;
			background: $uni-color-primary;
			border-radius: 12rpx;
			box-sizing: border-box;
			position: absolute;
			left: 0;
			top: 0;
			bottom: 0;
			transition: all 0.1s;
		}
		.close {
			width: 40rpx;
			height: 40rpx;
			position: absolute;
			right: -16rpx;
			top: -16rpx;
		}
		
	}
	.btn{
		width: 654rpx;
		height: 84rpx;
		background: #1C1C1C;
		border-radius: 42rpx;
		margin-top:86rpx;
		color:#fff;
		font-size: 32rpx;
	}
</style>
